<!-- @tce
代码说明：系统管理的标题栏
创建时间：2024.9.9       开发者：lizhicheng
使用项目：zhongguanghe   代码版本：V1.0 -->

<template>
  <div class="status-monitor-page">
    <el-row class="monitor-navbar" type="flex" justify="space-between" align="middle">
      <el-col :span="20">
        <el-menu background-color="#000C34" text-color="#4bc3ec" :default-active="selectedTab" mode="horizontal" @select="handleSelect">
          <el-menu-item index="fault-management">故障诊断</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <div class="content-wrapper">
      <el-row :gutter="20" type="flex" justify="space-between">
        <el-col :span="24">
          <div v-if="selectedTab === 'fault-management'">
            <!-- 设备信息管理的内容 -->
            <FaultDiagnosisManagement />
          </div>

        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import FaultDiagnosisManagement from '@/views/FaultDiagnosis.vue';


export default {
  name: 'SystemManagementPage',
  components: {
    FaultDiagnosisManagement
  },
  data() {
    return {
      breadcrumbs: ['故障诊断', '故障诊断'],
      selectedTab: 'fault-management',
    };
  },
  methods: {
    handleSelect(key) {
      if (key!== null) {
        this.selectedTab = key;
        this.updateBreadcrumbs();
      }
    },
    updateBreadcrumbs() {
      if (this.selectedTab === 'fault-management') {
        this.breadcrumbs = ['故障诊断', '故障诊断'];
      } 
    },
  },
};
</script>

  <style scoped>
  /* 整体页面背景颜色 */
  .status-monitor-page {
    background-color: #000C34;
    min-height: 100vh;
    padding: 20px;
    color: #C0C4CC;
  }
  
  /* 导航栏样式 */
  .monitor-navbar {
   /* background-color: #000C34!important;*/
    /*padding: 10px;*/
    margin-bottom: 20px;
  }

  .monitor-navbar.el-menu--horizontal {
  height: 30px; /* 设置你想要的高度值 */
}
  
  /* 选中菜单项样式 */
  .el-menu-item.is-active {
    color: white!important;
    border: 1px solid #0062ff;
    background-color: #0062ff!important;
    position: absolute;
    top:0.9vw;
    height: 30px;


  }
  /* 暂时不要分割线 */
.el-menu--horizontal.el-menu {
    border-bottom: 1.5px solid #053789;
    display: block;
    width: 93vw;
}


  /* 内容区域样式 */
  .content-wrapper {
    margin-top: 20px;
  }

  </style>